<template>
    <form @submit.prevent="handleSubmit" class="mb-4">
        <div class="row g-3 align-items-end">
            <!-- 描述输入框 -->
            <div class="col-12 col-md-4 col-lg-3">
                <div class="form-floating h-100">
                    <textarea v-model="form.description" class="form-control h-100" placeholder="Leave a comment here"
                        id="description" style="min-height: 80px" required></textarea>
                    <label for="description">描述</label>
                </div>
            </div>

            <!-- 分类下拉选择器（支持图标） -->
            <div class="col-6 col-md-3 col-lg-2">
                <IconDropdown v-model="form.categoryId" :options="tags" :loading="tagLoading" placeholder="选择分类"
                    class="w-100" required />
            </div>

            <!-- 类型选择框：收入 or 支出 -->
            <div class="col-6 col-md-3 col-lg-2">
                <select v-model="form.type" class="form-select" required>
                    <option value="0">收入</option>
                    <option value="1">支出</option>
                </select>
            </div>

            <!-- 金额输入框 -->
            <div class="col-6 col-md-3 col-lg-2">
                <div class="form-floating">
                    <input v-model="form.amount" type="number" step="0.01" min="0" placeholder="金额" class="form-control"
                        id="amount" required />
                    <label for="amount">金额</label>
                </div>
            </div>

            <!-- 日期选择器 -->
            <div class="col-6 col-md-3 col-lg-2">
                <input v-model="form.date" type="date" class="form-control" required />
            </div>

            <!-- 提交按钮 -->
            <div class="col-md-3 col-lg-1 mb-2">
                <button type="submit"
                    class="btn btn-success w-100 d-flex justify-content-center align-items-center transition-all"
                    :disabled="isSubmitting" :class="{ 'opacity-75': isSubmitting }">
                    <span v-if="isSubmitting" class="spinner-border spinner-border-sm me-1" role="status" />
                    {{ form.id ? '保存' : '添加' }}
                </button>
            </div>
        </div>

        <!-- 分类图标预览（辅助用户查看） -->
        <!-- <div v-if="tags.length" class="row mt-2">
            <div class="col-12">
                <div class="d-flex flex-wrap gap-2">
                    <div
                        v-for="tag in tags"
                        :key="tag.id"
                        class="badge text-body d-flex align-items-center p-2 border"
                    >
                        <i class="me-1" :class="[tag.icon, tag.color]"></i>
                        {{ tag.name }}
                    </div>
                </div>
            </div>
        </div> -->
    </form>
</template>

<script setup>
import { ref, watch, defineProps, defineEmits, onMounted } from 'vue';
import axios from '../api/axios';
import IconDropdown from './IconDropdown.vue';
import { useToast } from '../composables/useToast';

// Toast 组合函数：用于显示 success/error 消息
const { success, error } = useToast();

// 接收 props：initialData 是用于编辑时的预填数据
const props = defineProps({
    initialData: Object
});

// 向父组件发送事件，'saved' 表示保存成功
const emit = defineEmits(['saved']);

// ---------------------- 表单状态 ----------------------

// 当前表单数据（包括 id 是编辑用的）表单中，所有用户输入的内容都会实时保存在 form 这个对象里
const form = ref({
    id: null,
    description: '',
    type: 1, // 0: 收入, 1: 支出
    amount: '',
    date: '',
    categoryId: ''
});

const isSubmitting = ref(false); // 控制按钮 loading 状态

const tagLoading = ref(true); // 分类加载状态
// 分类数据：rawTags 是原始数据，tags 是经过筛选后的分类列表
const rawTags = ref([]);
const tags = ref([]);

// 🚩 根据收入/支出类型筛选分类
function filterTagsByType(type) {
    tags.value = rawTags.value
        .filter(tag => tag.type === Number(type))
        .map(tag => ({
            id: tag.id,
            name: tag.name,
            icon: tag.icon || 'bi-tag',
            color: tag.color || 'text-primary'
        }));
}

// ---------------------- 分类数据加载 ----------------------
const fetchTags = async () => {
    try {
        const res = await axios.get('/transactions/search/category');
        rawTags.value = res.data.data || [];
        // ✅ 请求完成后再过滤
        filterTagsByType(form.value.type);
    } catch (err) {
        error('分类获取失败');
    } finally {
        tagLoading.value = false;
    }
};

// ---------------------- 表单重置函数 ----------------------
const resetForm = () => {
    form.value = {
        id: null,
        description: '',
        type: 1,
        amount: '',
        date: '',
        categoryId: ''
    };
};

/** ---------------------- 编辑时的回显逻辑 ----------------------
 * 当 initialData 变化时，更新 form 数据
 * 编辑账单数据流向图
你点击账单上的“编辑”按钮
          ↓
onEditTransaction(item)  【父组件方法】
- 设置 editingTransaction.value = { ...item }
- 打开模态框 showFormModal.value = true
          ↓
<TransactionForm :initial-data="editingTransaction" />
- 传入 props.initialData
          ↓
TransactionForm.vue 子组件收到 props.initialData
          ↓
watch(() => props.initialData, ...) 监听变化
- 如果有新值，说明是“编辑模式”
- 把数据赋值到 form.value 中
          ↓
<form v-model="form.xxx" ...> 自动回显
- 描述、类型、金额、日期、分类都填充上去了
          ↓
你看到弹窗里的表单有内容啦 🎉
 */
watch(
    () => props.initialData,
    newVal => {
        if (newVal) {
            // 将后端字段映射成表单字段
            form.value = {
                id: newVal.id,
                description: newVal.desc,
                type: newVal.type,
                amount: newVal.amount,
                date: newVal.date,
                categoryId: newVal.categoryId || newVal.categoryInfo?.id || ''
            };
        } else {
            resetForm();
        }
    },
    { immediate: true } // 初始就触发一次（支持编辑时立即回显）
);

// ✅ 监听账单类型变化，切换分类列表
watch(
    () => form.value.type,
    newType => {
        if (rawTags.value.length > 0) {
            filterTagsByType(newType);
            // 重置分类选择，避免类型不匹配
            form.value.categoryId = '';
        }
    }
);

// ---------------------- 表单提交处理 ----------------------
const handleSubmit = async () => {
    // 表单验证
    if (!form.value.description.trim()) {
        error('请输入描述');
        return;
    }

    if (!form.value.amount || form.value.amount <= 0) {
        error('请输入有效的金额');
        return;
    }

    if (!form.value.date) {
        error('请选择日期');
        return;
    }

    if (!form.value.categoryId) {
        error('请选择账单分类');
        return;
    }

    isSubmitting.value = true;
    try {
        if (form.value.id) {
            // 编辑：PUT 请求
            await axios.put(`/transactions/save/${form.value.id}`, form.value);
            success('编辑成功！');
        } else {
            // 添加：POST 请求
            await axios.post('/transactions/save', form.value);
            success('添加成功！');
        }

        emit('saved'); // 通知父组件刷新
        resetForm(); // 清空表单
    } catch (err) {
        error(err.response?.data?.message || '网络异常，请稍后重试');
    } finally {
        isSubmitting.value = false;
    }
};

// ---------------------- 初始化逻辑 ----------------------
onMounted(() => {
    fetchTags(); // 获取分类下拉选项
    // 设置默认日期为今天（使用本地时间而不是UTC时间）
    if (!form.value.date) {
        const today = new Date();
        // 获取本地日期并格式化为 YYYY-MM-DD
        const year = today.getFullYear();
        const month = String(today.getMonth() + 1).padStart(2, '0');
        const day = String(today.getDate()).padStart(2, '0');
        form.value.date = `${year}-${month}-${day}`;
    }
});
</script>
